import style from "../css/Navbar.css";
import { Link } from "react-router-dom";
import React, { useEffect, useState } from "react";

function Navbar({ onConnectWallet, address }) {
  return (
    <body style={style}>
      <nav className="navbar">
        <div className="navbar-brand">PET Marktemplace</div>
        <Link to="/">Home</Link>
        <Link to="/create-nft">Create NFT</Link>
        <Link to="/my-pet">My Pets</Link>
        <Link to="/charge">Charge</Link>
        <div className="navbar-meau">
          <button className="connect-wallet-button" onClick={onConnectWallet}>
            {address.toString().slice(0, 8) || "connect Wallet"}
          </button>
        </div>
      </nav>
    </body>
  );
}
export default Navbar;
